/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions} from 'react-native';

// project
import {
	Page, Content, Text, ItemX, ItemY, Row, Header, Footer, Hand
} from '../../../../library'


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Cash extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 余额使用记录的变量
			list:[
				{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
			]
		}
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>

				{/* 页面顶部部分，此部分不随页面滚动，所以没有放在content标签内 */}
				<View style={{position:'absolute',top:40, zIndex:10,width: Dimensions.get('window').width}}>
					<Row bg='#2a2f30' pa='10' pt='40' x='center' y='center'>
						<Text color='#2bc76f' size='14'>账户余额</Text>
					</Row>
					<Row bg='#2a2f30' pb='20' x='center' y='center'>
						<Text bold color='#fff' size='26'>￥</Text>
						<Text bold color='#fff' size='32'>1000</Text>
					</Row>
					<Row bg='#2a2f30' pb='40' x='center' y='center'>
						<View style={{borderColor:'#2bc76f', borderWidth:1, width:140,  display:'flex', alignItems:'center', paddingTop:8, paddingBottom:8, borderRadius:5}}><Text bold color='#2bc76f' size='15'>充值</Text></View>
					</Row>
					<Row rt='20' pt='20' px='15' bg='#fff' mt='-20' h='30'></Row>
				</View>
				

				<Content mt='250' bg='#fff' >

					{/* 循环余额变更的记录 */}
					<View style={{paddingLeft:15,paddingRight:15}}>
						{this.state.list.map(() => {
							return (<Hand bb='1 #dedee0' py='5'>
								<ItemY f='1'>
									<Text>余额支付订单</Text>
									<Text color='#b8b8b8' size='13' pt='5'>2018-09-22 10:54:14</Text>
								</ItemY>
								<ItemX f='1' x='right' y='center'>
									<Text pr='10'>-105.01</Text>
								</ItemX>
							</Hand>);
						})}
					</View>

				</Content>

				{/* 头部 */}
				<Header h='40' bg='#fff' px='10'></Header>
				
				{/* 底部 */}
				<Footer bg='#fff'></Footer>
                
			</Page>
		);
	}
}
